<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户</title>
    <script type="text/javascript" src="/crm/js/vue.js"></script>
    <script type="text/javascript" src="/crm/js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="custInfo" v-cloak>
    <table>
        <tr>
            <td>
                <el-input
                        style="width:200px;"
                        placeholder="请输入名称"
                        v-model="customerName"
                        clearable>
                </el-input>
            </td>
            <td>
                <el-date-picker
                        editable=false
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="beginTime"
                        type="datetime"
                        placeholder="选择开始时间"
                        :picker-options="pickerBeginDateBefore"  @change="changeTime">
                </el-date-picker>
            </td>
            <td>
                ——
            </td>
            <td>
                <el-date-picker
                        editable="false"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="endTime"
                        type="datetime"
                        placeholder="选择结束时间"
                        :picker-options="pickerBeginDateAfter">
                </el-date-picker>
            </td>
            <td>
                <el-button type="primary" @click="searchCustomer" icon="el-icon-search">搜索</el-button>
            </td>
            <td>
                <el-button type="primary" v-if="showManager" @click="addCustomer">添加</el-button>
            </td>
            <td>
                <el-button type="success" @click="exportExcel">导出表格</el-button>
            </td>
            <td>
                <el-button type="info" v-if="showManager"  @click="downExcel">下载模板</el-button>
            </td>
            <td>
                <el-upload
                        v-if="showManager"
                        class="upload-demo"
                        action="publicCustomerUpload"
                        :on-success="uploadSuccess"
                >
                    <el-button type="primary">批量添加</el-button>
                </el-upload>
            </td>
        </tr>
    </table>
    <template>
        <el-table
                @sort-change='sortChange'
                :data="customers"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="客户编号">
                            <span>{{ props.row.customerId }}</span>
                        </el-form-item>
                        <el-form-item label="客户名称">
                            <span>{{ props.row.customerName }}</span>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <span>{{ props.row.firstTel }}</span>
                        </el-form-item>
                        <el-form-item label="备用电话">
                            <span>{{ props.row.secondTel }}</span>
                        </el-form-item>
                        <el-form-item label="性别">
                            <span>{{ props.row.sex }}</span>
                        </el-form-item>
                        <el-form-item label="证件类型">
                            <span>{{ props.row.idType }}</span>
                        </el-form-item>
                        <el-form-item label="证件号码">
                            <span>{{ props.row.idCard }}</span>
                        </el-form-item>
                        <el-form-item label="客户地址">
                            <span>{{ props.row.address }}</span>
                        </el-form-item>
                        <el-form-item label="是否婚配">
                            <span>{{ props.row.marriage }}</span>
                        </el-form-item>
                        <el-form-item label="工作类型">
                            <span>{{ props.row.job }}</span>
                        </el-form-item>
                        <el-form-item label="意向产品">
                            <span>{{props.row.make!=null? (props.row.make+props.row.line+props.row.type):""}}</span>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <span>{{ props.row.createTime }}</span>
                        </el-form-item>
                        <el-form-item label="客户来源">
                            <span>{{ props.row.customerSource }}</span>
                        </el-form-item>
                        <el-form-item label="客户等级">
                            <span>{{ props.row.customerLevel }}</span>
                        </el-form-item>
                        <el-form-item label="负责人">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="客户编号"
                    prop="customerId">
            </el-table-column>
            <el-table-column
                    label="客户名称"
                    prop="customerName">
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="sex">
            </el-table-column>
            <el-table-column
                    label="联系方式"
                    prop="firstTel">
            </el-table-column>
            <el-table-column
                    label="意向产品"
                    prop="type">
            </el-table-column>
            <el-table-column
                    sortable="custom"
                    label="创建时间"
                    prop="createTime">
            </el-table-column>
            <el-table-column
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button
                            v-if="showManager"
                            size="mini"
                            type="primary"
                            @click="editCustomer(scope.row.customerId)">修改</el-button>
                    <el-button
                            v-if="showManager"
                            size="mini"
                            type="danger"
                            @click="delCustomer( scope.row.customerId)">删除</el-button>
                    <el-button
                            v-if="showSales"
                            size="mini"
                            type="danger"
                            @click="selCustomer( scope.row.customerId)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!---------------------------------分页--------------------------------------------->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[6,9,12]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="选择意向产品" :visible.sync="productFormVisible" >
        <el-form ref="productForm" :rules="productRules"  :inline="inline" :model="productForm" label-width="120px" size="mini" label-position="left">
            <el-form-item label="品牌"  prop="make" :label-width="formLabelWidth">
                <el-select v-model="productForm.make" @change="makeChange()" placeholder="品牌">
                    <el-option v-for="thisMake in xmake" v-bind:value="thisMake">{{thisMake}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="车系" prop="line" :label-width="formLabelWidth">
                <el-select v-model="productForm.line"  @change="lineChange()" placeholder="车系">
                    <el-option v-for="thisLine in line" v-bind:value="thisLine">{{thisLine}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="款型" prop="type" :label-width="formLabelWidth">
                <el-select v-model="productForm.type" @change="typeChange()" placeholder="款型">
                    <el-option v-for="thisType in type" v-bind:value="thisType">{{thisType}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="外观颜色" prop="outColor" :label-width="formLabelWidth">
                <el-select v-model="productForm.outColor" @change="bodyColorChange()" placeholder="外观颜色">
                    <el-option v-for="thisBodyColor in bodyColor" v-bind:value="thisBodyColor">{{thisBodyColor}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="内置颜色" prop="inColor" :label-width="formLabelWidth">
                <el-select v-model="productForm.inColor" placeholder="内置颜色">
                    <el-option v-for="thisInColor in inColor" v-bind:value="thisInColor">{{thisInColor}}</el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="productFormVisible = false">取 消</el-button>
            <el-button  type="primary" @click="submitProductForm('productForm')" >确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="客户信息" :visible.sync="dialogFormVisible">
        <el-form ref="form" :rules="rules"  :inline="inline" :model="form" label-width="80px" size="mini" label-position="left">
            <el-input v-model="form.customerid" type="hidden"  autocomplete="off"></el-input>
            <table>
                <tr>
                    <td>
                        <el-form-item label="客户姓名" prop="customername" :label-width="formLabelWidth">
                            <el-input v-model="form.customername" autocomplete="off"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="性别"  prop="sex" >
                            <el-radio-group v-model="form.sex">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="联系方式" prop="firsttel"  :label-width="formLabelWidth">
                            <el-input v-model="form.firsttel" autocomplete="off"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="备用联系方式" prop="secondtel" :label-width="formLabelWidth">
                            <el-input v-model="form.secondtel" autocomplete="off"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="证件类型" prop="idtype" :label-width="formLabelWidth">
                            <el-select v-model="form.idtype" placeholder="证件类型">
                                <el-option label="身份证" value="身份证"></el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="证件号码" prop="idcard" :label-width="formLabelWidth">
                            <el-input v-model="form.idcard" autocomplete="off"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="地址" prop="areacode" :label-width="formLabelWidth">
                            <el-input v-model="form.areacode" autocomplete="off"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="详细地址" prop="address" :label-width="formLabelWidth">
                            <el-input v-model="form.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="婚姻状况"  prop="marriage" :label-width="formLabelWidth">
                            <el-radio-group v-model="form.marriage">
                                <el-radio label="已婚"></el-radio>
                                <el-radio label="未婚"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="工作职业"  prop="job"  :label-width="formLabelWidth">
                            <el-input v-model="form.job" autocomplete="off"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="客户等级" prop="customerlevel" :label-width="formLabelWidth">
                            <el-select v-model="form.customerlevel" placeholder="客户等级">
                                <el-option label="A" value="A"></el-option>
                                <el-option label="B" value="B"></el-option>
                                <el-option label="C" value="C"></el-option>
                                <el-option label="H" value="H"></el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="客户来源" prop="customersource" :label-width="formLabelWidth">
                            <el-select v-model="form.customersource" placeholder="客户来源">
                                <el-option label="广告传单" value="广告传单"></el-option>
                                <el-option label="朋友介绍" value="朋友介绍"></el-option>
                                <el-option label="网络宣传" value="网络宣传"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="意向产品" prop="productid" :label-width="formLabelWidth">
                            <el-input v-model="pname" readonly="true" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-button
                                size="mini"
                                type="success"
                                @click="selProduct">选择/查看</el-button>
                    </td>
                    <td>
                        <el-form-item label="首次联系时间"  prop="createtime"  :label-width="formLabelWidth">
                            <div class="block">
                                <el-date-picker
                                        :disabled="disabled"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        v-model="form.createtime"
                                        type="datetime"
                                        placeholder="选择日期时间">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="备注" prop="comment" :label-width="formLabelWidth">
                            <el-input v-model="form.comment" autocomplete="off"></el-input>
                        </el-form-item>
                    </td>
                </tr>
            </table>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button @click="resetForm('form')">清空</el-button>
            <el-button  type="primary" @click="submitForm('form')" >确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    var vm=new Vue({
        el:"#custInfo",
        data:{
            isPublic:1,//是否是公共客户页面，0代表不是，1代表是
            customers:[],
            products:[],//产品
            bodyColor:[],//车身颜色
            inColor:[],//内置颜色
            type:[],//种类
            line:[],//系列
            pid:'',//所选产品的id
            pname:'未选择',//所选产品的名称
            xmake: [],//品牌
            loginName:'',//当前登录名
            show:true,//判断对不同的角色显示按钮
            selectRows:[],//导出选择框
            showSales:true,//业务员是否可见
            showManager:true,//销售经理是否可见
            pageNo:1,
            //一页显示多少条
            pageSize:9,
            //总计多少条数据
            total:0,
            prop:'createtime',
            orderd:'desc',
            customerName:'',
            beginTime:'',
            endTime:'',
            inline:true,
            disabled:false,
            dialogFormVisible:false,//表单隐藏
            productFormVisible:false,//意向产品选择弹窗隐藏
            productForm:{
                make:'',
                line:'',
                type:'',
                inColor:'',
                outColor:'',
            },
            form:{
                isPublic:1,
                customerid:'',
                customername:'',
                firsttel:'',
                secondtel:'',
                sex:'',
                idtype:'',
                idcard:'',
                areacode:'',
                address:'',
                marriage:'',
                job:'',
                productid:'',
                createtime:'',
                customersource:'',
                customerlevel:'',
                userId:'',
                comment:'',
            },
            rules: {                    //表单验证
                customername: [
                    { required: true, message: '请输入客户名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请输入客户性别', trigger: 'blur' },
                ],
                createtime: [
                    { required: true, message: '请输入联系时间', trigger: 'blur' },
                ],
                firsttel: [
                    // { required: true, message: '请输入联系方式', trigger: 'blur' },
                    {required: true, validator: checkTel, trigger: 'blur'}
                ],
                secondtel: [
                    {required: false, validator: checkSecondTel, trigger: 'blur'}
                ],
                idcard:[
                    {required: false, validator: checkIdCard, trigger: 'blur'}
                ],
                customersource: [
                    { required: true, message: '请选择客户来源', trigger: 'blur' }
                ],
                customerlevel: [
                    { required: true, message: '请选择客户等级', trigger: 'blur' }
                ],
            },
            productRules:{
                make: [
                    { required: true, message: '请选择产品品牌', trigger: 'blur' },
                ],
                line: [
                    { required: true, message: '请选择产品系列', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择产品型号', trigger: 'blur' },
                ],
                outColor: [
                    { required: true, message: '请选择外观颜色', trigger: 'blur' },
                ],
                inColor: [
                    { required: true, message: '请选择内饰颜色', trigger: 'blur' },
                ],
            },
            pickerBeginDateBefore: {
                disabledDate: (time) => {
                    let beginDateVal = vm.endTime;
                    if (beginDateVal) {
                        return time.getTime() > beginDateVal;
                    }
                }
            },
            pickerBeginDateAfter: {
                disabledDate: (time) => {
                    let beginDateVal =vm.beginTime;
                    if (beginDateVal) {
                        return time.getTime() < beginDateVal;
                    }
                }
            },
        },
        created:function () {
            //封装分页查询条件
            var temp=this;
            var query={"pageNo":this.pageNo,"pageSize":this.pageSize,"prop":this.prop,"orderd":this.orderd,"isPublic":this.isPublic};
            axios.post('listCustomer',query)
                .then(function (value) {
                    temp.customers=value.data.rowList;
                    temp.total = value.data.totalList;
                })
                .catch(function (error) {
                    console.log(error);
                });
            //判断按钮操作是否可见
            axios.post("getLoginInfo")
                .then(function (response) {
                    if(response.data.rId!=2){
                        vm.showManager=false;
                    }
                    if(response.data.rId!=1){
                        vm.showSales=false;
                    }
                })
        },
        methods:{
            loadingData: function () {
                //定义请求的url
                var url = "listCustomer";
                //查询
                var customerName=vm.customerName;
                var beginTime=vm.beginTime;
                var endTime=vm.endTime;
                var isPublic=vm.isPublic;
                //排序
                var prop=vm.prop;
                var orderd=vm.orderd;
                //封装分页查询条件
                var query={"pageNo":vm.pageNo,"pageSize":vm.pageSize,"customerName":customerName,
                    "beginTime":beginTime,"endTime":endTime,"prop":prop,"orderd":orderd,"isPublic":isPublic};
                axios.post(url,query).then(function (value) {
                    vm.customers=value.data.rowList;
                    vm.total = value.data.totalList;
                });
            },
            //限制时间框的时间选择
            changeTime(date){
                vm.endTime="";
                this.pickerBeginDateAfter={
                    disabledDate(time) {
                        //开始时间-结束时间
                        return (time.getTime() < new Date(date).getTime());
                    }
                }
            },
            //多选数据筛选
            handleSelectionChange:function(value){
                // vm.selectRows=[];//先置空，在把已经选的id加入
                //  for(var i=0;i<value.length;i++){
                //      vm.selectRows.push(value[i].customerId);
                //    // alert(value[i].customerId);
                //  }
                vm.selectRows=value;
            },
            //表格导出
            exportExcel:function(){
                console.log(vm.selectRows);
                if(vm.selectRows==0){
                    vm.msg("请选择至少一条数据");
                }else{
                    var url = "exportCustomerInExcel";
                    var query = {"customers":vm.selectRows}
                    axios.post(url, query).then(function (response) {
                        vm.msg(response.data.message);
                    });
                }

            },
            //车辆系列筛选
            makeChange:function(){
                vm.line=[];
                vm.productForm.line="";
                vm.productForm.type="";
                vm.productForm.inColor="";
                vm.productForm.outColor="";
                for (var i=0;i<vm.products.length;i++){
                    if(vm.products[i].make==vm.productForm.make){
                        var flag=true;
                        for(var j=0;j<vm.line.length;j++){
                            if(vm.products[i].line==vm.line[j]){
                                flag=false;
                            }
                        }
                        if(flag==true){
                            vm.line.push(vm.products[i].line);
                        }
                    }
                }
            },
            //车辆类型筛选
            lineChange:function(){
                vm.type=[];
                vm.productForm.type="";
                vm.productForm.inColor="";
                vm.productForm.outColor="";
                for (var i=0;i<vm.products.length;i++){
                    if(vm.products[i].make==vm.productForm.make&&vm.products[i].line==vm.productForm.line){
                        var flag=true;
                        for(var j=0;j<vm.type.length;j++){
                            if(vm.products[i].type==vm.type[j]){
                                flag=false;
                            }
                        }
                        if(flag==true){
                            vm.type.push(vm.products[i].type);
                        }
                    }
                }
            },
            //车辆外观筛选
            typeChange:function(){
                vm.bodyColor=[];
                vm.productForm.outColor="";
                vm.productForm.inColor="";
                for (var i=0;i<vm.products.length;i++){
                    if(vm.products[i].make==vm.productForm.make&&vm.products[i].line==vm.productForm.line&&vm.products[i].type==vm.productForm.type){
                        var flag=true;
                        for(var j=0;j<vm.bodyColor.length;j++){
                            if(vm.products[i].bodyColor==vm.bodyColor[j]){
                                flag=false;
                            }
                        }
                        if(flag==true){
                            vm.bodyColor.push(vm.products[i].bodyColor);
                        }
                    }
                }
            },
            //车辆内饰筛选
            bodyColorChange:function(){
                vm.inColor=[];
                for (var i=0;i<vm.products.length;i++){
                    if(vm.products[i].make==vm.productForm.make&&vm.products[i].line==vm.productForm.line&&vm.products[i].type==vm.productForm.type&&vm.products[i].bodyColor==vm.productForm.outColor){
                        var flag=true;
                        for(var j=0;j<vm.inColor.length;j++){
                            if(vm.products[i].InteriorColor==vm.inColor[j]){
                                flag=false;
                            }
                        }
                        if(flag==true){
                            vm.inColor.push(vm.products[i].InteriorColor);
                        }
                    }
                }
            },



            //修改一页显示多少行
            handleSizeChange:function (pageSize) {
                vm.pageSize=pageSize;
                //刷新页面
                vm.loadingData();

            },
            //修改当前页
            handleCurrentChange:function (pageNo) {
                //vm.pageNo是全局变量，跟view绑定，参数pageNo是切换当前页传入的值
                vm.pageNo=pageNo;
                //刷新页面
                vm.loadingData();
            },
            //搜索
            searchCustomer:function () {
                vm.loadingData();
            },
            //表格排序
            sortChange:function (column,prop, order) {
                vm.prop=column.prop;
                if(column.order.indexOf("asc")!=-1){
                    vm.orderd="asc";
                }
                if(column.order.indexOf("desc")!=-1){
                    vm.orderd="desc";
                }
                vm.loadingData();
            },
            //表格重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //添加客户
            addCustomer:function () {
                vm.pname='未选择';
                vm.productForm={
                    make:'',
                    line:'',
                    type:'',
                    inColor:'',
                    outColor:'',
                };
                vm.disabled=false;
                vm.dialogFormVisible=true;
                vm.resetForm('form');
                vm.form.customerid='';//因为有一个隐藏框，说以手动置空
                // vm.getLoginInfo();
                // vm.form.customerid='';//因为有一个隐藏框，说以手动置空
            },
            // //获取登录信息
            // getLoginInfo:function(){
            //     axios.post("getLoginInfo")
            //         .then(function (response) {
            //             vm.resetForm('form');
            //             vm.form.userName=response.data.name;
            //             vm.form.userId=response.data.userId;
            //         })
            // },
            //添加修改的表单保存
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible = false;
                        if(vm.form.customerid!=''){
                            axios.post('updateCustomer',vm.form)
                                .then(function (value) {
                                    vm.loadingData();
                                    vm.msg(value.data.message);
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                        }else{
                            axios.post('addCustomer',vm.form)
                                .then(function (value) {
                                    vm.loadingData();
                                    vm.msg(value.data.message);
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //提交产品选择表单
            submitProductForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        vm.pname=vm.productForm.make+" "+vm.productForm.line+" "+vm.productForm.type;
                        // alert(vm.productForm.make+"--"+vm.productForm.line+"--"+vm.productForm.type+"--"+
                        //     vm.productForm.inColor+"--"+vm.productForm.outColor);
                        for(var i=0;i<vm.products.length;i++){
                            if(vm.products[i].make==vm.productForm.make){
                                if(vm.products[i].line==vm.productForm.line){
                                    if(vm.products[i].type==vm.productForm.type){
                                        if(vm.products[i].bodyColor==vm.productForm.outColor){
                                            if(vm.products[i].InteriorColor==vm.productForm.inColor){
                                                vm.pid=vm.products[i].pid;
                                                //把选中的产品的id给表单
                                                vm.form.productid=vm.pid;
                                                // alert("产品id"+vm.pid);
                                                break;
                                            }
                                        }
                                    }
                                }
                            }

                        }
                        this.productFormVisible = false;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //业务员选择公共客户
            selCustomer:function(customerId){
                var params =  new URLSearchParams();
                params.append("customerId",customerId);
                axios.post("selCustomer",params)
                    .then(function (value) {
                        vm.msg(value.data.message);
                        vm.loadingData();
                    })
            },
            editCustomer:function(customerId,userName){
                //让产品选择初始化
                vm.pname='未选择';
                vm.dialogFormVisible =true;
                vm.disabled=true;
                //vm.resetForm('form');
                var params =  new URLSearchParams();
                params.append('customerId',customerId);
                axios.post('getCustomer', params)
                    .then(function (value) {
                        if(value.data.productId!=null){
                            vm.pname=value.data.make+value.data.line+value.data.type;
                            vm.productForm={
                                make:value.data.make,
                                line:value.data.line,
                                type:value.data.type,
                                inColor:value.data.InteriorColor,
                                outColor:value.data.bodyColor,
                            }
                        }else{
                            vm.productForm={
                                make:'',
                                line:'',
                                type:'',
                                inColor:'',
                                outColor:'',
                            };
                        }
                        vm.form= {
                            customerid:value.data.customerId,
                            customername:value.data.customerName,
                            firsttel:value.data.firstTel,
                            secondtel:value.data.secondTel,
                            sex:value.data.sex,
                            idtype:value.data.idType,
                            idcard:value.data.idCard,
                            areacode:value.data.areaCode,
                            address:value.data.address,
                            marriage:value.data.marriage,
                            job:value.data.job,
                            productid:value.data.productId,
                            createtime:value.data.createTime,
                            customersource:value.data.customerSource,
                            customerlevel:value.data.customerLevel,
                            userName:value.data.name,
                            userId:value.data.userId,
                            comment:value.data.comment,
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            delCustomer:function(customerId){
                this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var params =  new URLSearchParams();
                    params.append('customerId',customerId);
                    axios.post('delCustomer', params)
                        .then(function (value) {
                            vm.loadingData();
                            vm.msg(value.data.message);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }).catch(() => {
                    vm.msg("已取消删除");
                });
            },
            msg:function(msg) {
                this.$notify.info({
                    title: '提示',
                    message: msg
                });
            },
            //文件上传成功
            uploadSuccess: function (response, file, fileList) {
                vm.loadingData();
                vm.msg(response.message);
            },
            downExcel:function () {
                window.location.href="/crm/temp/excelTemp.xlsx"
            },
            selProduct:function () {
                vm.productFormVisible=true;
                //获取所有产品的信息
                axios.post('listProducts')
                    .then(function (value) {
                        vm.products=value.data;
                        for (var i = 0; i <vm.products.length; i++) {
                            var flag=true;
                            for(var j=0;j<vm.xmake.length;j++){
                                if(vm.products[i].make==vm.xmake[j]){
                                    flag=false;
                                }
                            }
                            if(flag==true){
                                vm.xmake.push(vm.products[i].make);
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
    });
    function  checkTel(rule, value,callback) {
        if (!value){
            callback(new Error('请输入联系方式'));
        }else  if(!isValidPhone(value)){
            callback(new Error('请输入正确的11位手机号码'));
        }else {
            callback();
        }
    }
    function  checkSecondTel(rule, value,callback) {
        if(value){
            if(!isValidPhone(value)){
                callback(new Error('请输入正确的11位手机号码'));
            }else {
                callback();
            }
        }else {
            callback();
        }
    }

    function isValidPhone(str) {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        return reg.test(str);
    }
    function checkIdCard(rule, value,callback) {
        if(value){
            if(!isCardNo(value)){
                callback(new Error('身份证号码格式不正确'));
            }else {
                callback();
            }
        }else {
            callback();
        }
    }
    function isCardNo(card)
    {
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
        return reg.test(card);
    }
</script>
</html>